﻿Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id:'gear',
        handler: function(){
           
        }
    },{
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    }];

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
                border : false,
                region:'north',
                layout:'anchor',
                height:50,
                bodyStyle :'background-color:#C6D8ED;',
                items:[
                    {
                        xtype:"box",
                        el:"north",
                        border: false,
                        anchor: 'none -23'
                    }
                ]
            },
            {
            border: false,
            autoScroll:true,
            xtype:'portal',
            region:'center',
            id:'main_p',
            //margins:'35 25 25 20',
            tbar:[
				            {
				            	text:'确定顺序',
				            	handler:function (){
				            		alert('ok');
				            	}
				            },'-',
				            {
			            		text:'顺序美化',
			            		handler:function (){
			            			 var allMms=[];
			   								 for(var i=1;i<=5;i++)
				   							 Ext.getCmp('main_p'+i).items.each(function(item) {
				       		 					Ext.getCmp('main_p'+i).remove(item,false);
				       		 				
				       							allMms.push(item);
				            
				   							 });
	      								 var lines=Math.ceil(allMms.length/5);
												 for(var i=0;i<allMms.length;i++) {
													 	//console.log('main_p'+(Math.floor(i/lines)+1));
													 	allMms[i].setTitle('帧'+(i+1));
														Ext.getCmp('main_p'+(Math.floor(i/lines)+1)).add(allMms[i]);
				  								}
					    						Ext.getCmp('main_p').doLayout();
    
           
            						}
            					}
            	
            	
            	],
            items:[
            {
                 columnWidth:.2,
                 style:'padding:10px 0 10px 10px;margin:0px 25px',
                 id:'main_p1',
                 defaults :{
                 	  style:'margin:0px 0 25px 0',
                    width:176,
                    height:208
                } ,
                items:[{
                    title: '1',
                    layout:'fit',
                    tools: tools,
                    html: 'test1'
                },{
                    title: '2',
                    tools: tools,
                    html: 'test2'
                }]
            },
            {
                 columnWidth:.2,
                 style:'padding:10px 0 10px 10px;margin:0px 25px',
                 id:'main_p2',
                 defaults :{
                 	  style:'margin:0px 0 25px 0',
                    width:176,
                    height:208
                } ,
                items:[{
                    title: '3',
                    layout:'fit',
                    tools: tools,
                    html: 'test3'
                },{
                    title: '4',
                    tools: tools,
                    html: 'test4'
                }]
            },
            {
                 columnWidth:.2,
                 style:'padding:10px 0 10px 10px;margin:0px 25px',
                 id:'main_p3',
                 defaults :{
                 	  style:'margin:0px 0 25px 0',
                    width:176,
                    height:208
                } ,
                items:[{
                    title: '5',
                    layout:'fit',
                    tools: tools,
                    html: 'test5'
                },{
                    title: '6',
                    tools: tools,
                    html: 'test6'
                }]
            },{
                columnWidth:.2,
                style:'padding:10px 0 10px 10px;margin:0px 25px',
                id:'main_p4',
                defaults :{
                  	style:'margin:0px 0 25px 0',
                 	  width:176,
                    height:208
                } ,
                items:[{
                    title: '7',
                    tools: tools,
                    html: 'test7'
                },{
                    title: '8',
                    tools: tools,
                    html: 'test8'
                }]
            },{
                 columnWidth:.2,
                 style:'padding:10px 0 10px 10px;margin:0px 25px',
                 id:'main_p5',
                 defaults :{
                  	style:'margin:0px 0 25px 0',
                 	  width:176,
                    height:208
                } ,
                items:[{
                    title: '9',
                    tools: tools,
                    html: 'test9'
                },{
                    title: '10',
                    tools: tools,
                    html: 'test10'
                }]
            }]
            
            /*
             * Uncomment this block to test handling of the drop event. You could use this
             * to save portlet position state for example. The event arg e is the custom 
             * event defined in Ext.ux.Portal.DropZone.
            
            ,listeners: {
                'drop': function(e){
                	return false;
                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + 
                        e.columnIndex + '<br />Position: ' + e.position);
                }
            } */
        },

            new Ext.Toolbar(
            {
                //border: false,
                region:"south",
                height:25,
                items:[
                    "动画制作 ...",
                  
                    new Ext.Toolbar.Fill(),
                    "版权所有　<a href='#'><font color=blue>http://www.sunrise.corp</font></a>"
                ]})]
    });
    
  
  
  
});

